<template>
  <div class="tutorial">
    <h2>🧩 组件内的守卫学习</h2>
    <p>在组件内部通过 <code>beforeRouteEnter</code> / <code>beforeRouteUpdate</code> / <code>beforeRouteLeave</code> 控制导航。</p>

    <div class="panel">
      <h3>触发日志（当路由变化时）</h3>
      <ul>
        <li v-for="(log, i) in logs" :key="i">{{ log }}</li>
      </ul>
    </div>

    <p class="note">说明：需要将该组件作为路由页或被路由页引用，路由变化时才能看到日志。</p>
  </div>
</template>

<script>
export default {
  name: 'InComponentGuardTutorial',
  data() {
    return { logs: [] }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.logs.push(`[enter] 进入：${to.fullPath}`)
    })
  },
  beforeRouteUpdate(to, from, next) {
    this.logs.push(`[update] 切换到：${to.fullPath}`)
    next()
  },
  beforeRouteLeave(to, from, next) {
    this.logs.push(`[leave] 离开到：${to.fullPath}`)
    next()
  }
}
</script>

<style scoped>
.tutorial { padding: 20px; }
h2 { margin-bottom: 10px; }
.panel { margin-top: 16px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding: 12px; }
.note { margin-top: 10px; color:#334155; background:#e2e8f0; padding:8px 12px; border-radius:6px; }
ul { padding-left: 20px; }
</style>